
<!DOCTYPE html>
<html>
<head>
    <title>探星科技 - 自闭症预测专业系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            position: relative;
        }
        header {
            background-color: #333;
            color: white;
            padding: 20px 0;
            text-align: center;
        }
        nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
            text-align: center;
        }
        nav ul li {
            display: inline;
            margin: 0 10px;
        }
        nav ul li a {
            color: white;
            text-decoration: none;
        }
        section {
            background-color: white;
            margin: 20px auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
            width: 80%;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .upload-area {
            display: flex;
            align-items: center;
            gap: 20px;
        }
        .preview-box {
            width: 128px;
            height: 128px;
            background-color: #ddd;
            border: 1px solid #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        .preview-box img {
            max-width: 100%;
            max-height: 100%;
        }
        .diagnosis-box {
            display: none; /* Initially hidden */
            position: relative;
            background-color: #e3f2fd;
            border: 1px solid #90caf9;
            padding: 10px;
            margin-top: 20px;
            border-radius: 8px;
        }
        .export-button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 5px 10px;
            font-size: 12px;
            border-radius: 5px;
            cursor: pointer;
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin-top: 10px;
        }
        footer {
            text-align: center;
            padding: 20px;
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <header>
        <h1>安徽探星科技有限公司</h1>
        <nav>
            <ul>
                <li><a href="#">自闭症预测系统</a></li>
                <li><a href="#">眼动干预游戏测试</a></li>
                <li><a href="#">自闭症科普</a></li>
                <li><a href="#">心理咨询</a></li>
                <li><a href="#">合作咨询</a></li>
                <li><a href="#">联系方式</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="image-upload" class="image-upload-section">
            <h2>图像上传</h2>
            <div class="upload-area">
                <div class="preview-box" id="preview-box"></div>
                <input type="file" id="file-input" accept="image/png" onchange="previewFile()">
            </div>
            <div class="diagnosis-box" id="diagnosis-box">
                <button class="export-button" onclick="exportReport()">导出诊断报告</button>
                <h3>诊断意见：</h3>
                <p>诊断结果将在此显示...</p>
            </div>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 安徽探星科技有限公司</p>
    </footer>
    <script>
        function previewFile() {
            var previewBox = document.getElementById('preview-box');
            var diagnosisBox = document.getElementById('diagnosis-box');
            var file = document.getElementById('file-input').files[0];
            var reader = new FileReader();

            reader.onloadend = function() {
                var img = document.createElement('img');
                img.src = reader.result;
                previewBox.innerHTML = '';
                previewBox.appendChild(img);
                diagnosisBox.style.display = 'block'; // Show diagnosis section
                diagnosisBox.querySelector('p').textContent = '诊断结果：眶部额中回（10）、眶内额上回（26）、直回（27）、前扣带和旁扣带脑回（31、32）、杏仁核（41）、颞中回（88）和颞下回（90）检验结果共有2532个差异连接，基于 RGDAT 的自闭症预测模型预测该患者自闭症患病率为70.9—74%。';
            }

            if (file) {
                reader.readAsDataURL(file);
            } else {
                previewBox.innerHTML = '';
                diagnosisBox.style.display = 'none'; // Hide diagnosis section if no file is selected
            }
        }

        function exportReport() {
            alert("导出诊断报告的功能尚未实现。");
        }
    </script>
</body>
</html>
